<template>
    <div class="barwrap">
        <van-cell :title="_title" icon="chart-trending-o" />
        <el-table
            ref="multipleTable"
            style="width: 100%"
            tooltip-effect="dark"
            :data="_rawData"
            border
            :span-method="objectSpanMethod"
        > 
            <el-table-column
                label="品牌"
                prop="brand"
                min-width="80"
            />
            <el-table-column
                label="客户"
                prop="customer"
                min-width="80"
            />
            <el-table-column
                label="总数"
                prop="frameCount"
                min-width="80"
            />
        </el-table>
    </div>
</template>

<script setup>
import {
    ref,
    defineExpose,
    defineProps,
} from "vue";

const _rawData = ref([]);
const _title = ref('');

const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
    // if (columnIndex === 0) { 
    //     if (rowIndex === 0) {
    //         return { rowspan: row.count, colspan: 1 };
    //     }

    //     const prevRow = _rawData.value[rowIndex - 1];
    //     if (row.customer === prevRow.customer) {
    //         return { rowspan: 0, colspan: 0 };
    //     } else {
    //         return { rowspan: row.count, colspan: 1 };
    //     }
    // }
}

const sortData = (data) => {
    // 使用sort方法和自定义比较函数对数组进行排序
    data.sort((a, b) => {
        if (a.customer < b.customer) return -1;
        if (a.customer > b.customer) return 1;
        if (a.brand < b.brand) return -1;
        if (a.brand > b.brand) return 1;
        return 0;
    });

    return data;
}

const handleCount = (data) => {
    // 用于计数的映射
    const customerCountMap = new Map();

    // 遍历数组，统计每个customer的数量
    data.forEach(item => {
    if (customerCountMap.has(item.customer)) {
        customerCountMap.set(item.customer, customerCountMap.get(item.customer) + 1);
    } else {
        customerCountMap.set(item.customer, 1);
    }
    });

    // 为每个对象添加re字段
    data.forEach((item, index) => {
    // 如果不是第一个具有相同customer的项，re为当前项之前相同customer的数量
    // 如果是第一个项，re为0
        item.count = customerCountMap.get(item.customer);
    });

    return data;
}

const updateValue = (params) => {
    const { rawData, title } = params;
    console.log('rowData=====>', rawData)
    _title.value = title; 
    // _rawData.value = handleCount(sortData(rawData));
    _rawData.value = rawData;
    
};

defineExpose({ updateValue });
</script>

<style lang="scss" scoped>
.barwrap {
    width: 100%;
    display: flex;
    flex-direction: column;

    .title {
        font-size: 16px;
        color: #666;
        font-weight: 400;
        padding: 10px 0;
    }
}
</style>